<template>
  <div style="min-height: 100vh;">

    <!-- 导航栏 -->
    <top-nav></top-nav>

    <div>
      <img style="width: 100%;" src="../assets/images/hotel-list-bg.png" alt="">
    </div>

    <div class="order-list-main">

      <el-tabs v-model="activeTab" @tab-click="getList">
        <el-tab-pane label="我要停车" name="1"></el-tab-pane>
        <el-tab-pane label="我要取车" name="2"></el-tab-pane>
      </el-tabs>

      <el-table v-if="activeTab == 1" v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="serialNum" label="停车场编号" align="center">
        </el-table-column>
        <el-table-column prop="description" label="描述">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="count" label="剩余车位数量" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showDialog(scope.row)">
              选择车位
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-if="activeTab == 2" v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="carNumber" label="车牌号" align="center">
        </el-table-column>

        <el-table-column prop="parkAddress" label="车位号">
        </el-table-column>


        <el-table-column prop="serialNum" label="停车场编号" align="center">
        </el-table-column>

        <el-table-column prop="description" label="描述">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>


        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm title="确定要解除吗？" @confirm="switchOccupy(scope.row)">
              <el-button slot="reference" type="primary">解除占用</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>


      <div class="flx-center">
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="this.query.page" :page-sizes="[10, 20, 30, 50]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="100">
        </el-pagination> -->
      </div>

    </div>
    <Footer></Footer>

    <el-dialog title="选择车位" :visible.sync="dialogVisible" width="50%">

      <el-table :data="dialogTableData" style="width: 100%">
        <el-table-column prop="parkAddress" label="车位号">
        </el-table-column>
        <el-table-column prop="isOccupy" label="当前状态">
          <template slot-scope="scope">
            {{ scope.row.isOccupy == '0' ? '空闲' : '已占' }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showCarNumDialog(scope.row)">
              占用此位
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>


    <el-dialog title="输入车牌号" append-to-body :before-close="onBeforeClose" :visible.sync="carNumDialogVisible"
      width="35%">

      <el-form :model="carNumForm" :rules="{
        carNumber: [{ required: true, message: '请输入车牌号', trigger: 'blur' }]
      }" ref="carNumFormRef" label-width="150px" class="demo-ruleForm">

        <el-form-item label="输入车牌号：" prop="carNumber">
          <el-input v-model="carNumForm.carNumber" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>



      <span slot="footer" class="dialog-footer">
        <el-button @click="carNumDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCarNumDialog()">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import { formDataPost, get, post } from "../utils/request";
import TopNav from '../components/TopNav'
import Footer from '../components/Footer.vue';
import VueBarcode from 'vue-barcode';

export default {
  name: "SparkList",
  components: {
    TopNav,
    Footer,
    'barcode': VueBarcode
  },
  data() {
    return {
      activeTab: '1',
      query: {
        page: 1,
        size: 10
      },
      dialogVisible: false,
      tableData: [],
      dialogTableData: [],
      userParks: [],
      loading: false,
      carNumForm: {
        carNumber: ''
      },
      carNumDialogVisible: false,
      row: '',
    }
  },
  mounted() {
    this.getList()

  },
  methods: {
    showDialog(row) {
      this.dialogTableData = row.parkSpaceVOList
      this.dialogVisible = true;
    },
    async getList() {
      this.loading = true
      let res = this.activeTab == 1 ? await get('/parkSpace/parkSpaceList')
        : await get('/parkSpace/getParkSpaceByUser/' + localStorage.getItem('userId'))

      this.loading = false
      console.log('getList : ', res);

      if (res.data.code == 200) {
        if (this.activeTab == 2) {
          this.tableData = []
          res.data.data.forEach(fitem => {
            fitem.parkSpaceVOList.forEach(cItem => {
              this.tableData.push({
                ...cItem,
                serialNum: fitem.serialNum,
                description: fitem.description,
                createTime: fitem.createTime,
                serialNum: fitem.serialNum,
                count: fitem.count,
                address: fitem.address,
              })
            })
          })

        } else {
          this.tableData = res.data.data
        }
      } else {
        this.$message(res.data.data)
        this.tableData = []
      }

    },

    async onBeforeClose(done) {
      console.log('onBeforeClose----', this.$refs.carNumFormRef);
      await this.$refs.carNumFormRef.resetFields()
      done()
      // this.carNumDialogVisible = false
    },

    showCarNumDialog(row) {
      this.row = row
      // this.dialogVisible = false

      this.carNumForm.carNumber = ''
      this.carNumDialogVisible = true
      this.$nextTick(() => {
        this.$refs.carNumFormRef.clearValidate()
      })
    },

    async confirmCarNumDialog() {
      let ret = await this.$refs.carNumFormRef.validate()
      console.log('ret', ret);
      if (ret) {
        this.switchOccupy(this.row)
      }

    },

    switchOccupy(row) {

      if (row.isOccupy == '1') {
        row.isOccupy = '0'
      } else {
        row.isOccupy = '1'
      }

      post('/parkSpace/changeStatus', {
        "id": row.id,
        "isOccupy": row.isOccupy,
        "userId": localStorage.getItem('userId'),
        "carNumber": this.carNumForm.carNumber
      }).then(res => {
        console.log('changeStatus', res);

        this.dialogVisible = false
        this.carNumDialogVisible = false
        this.getList()

      })



    },
    handleSizeChange(size) {
      this.query.size = size
      this.getList()
    },
    handleCurrentChange(page) {
      this.query.page = page
      this.getList()
    },

  }
}
</script>

<style scoped>
.order-list-main {
  /* height: calc(100vh - 220px); */
  padding: 30px 12%;
  background-color: #ecf5ff;

}

.flx-center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
</style>
